<!-- 
    author:煜
    time:2021-6-2
 -->
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>漫画</title>
    <link rel="stylesheet" href="./css/comics.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
</head>

<body>
    <div class="wrap-comics">
        <div class="manga-panel">
            <!-- 顶部标题与选择栏 -->
            <header class="storey-title">
                <div class="l-con">
                   <svg id="img-icon" viewBox="0 0 1024 1024"><path d="M722.204444 843.491556H170.524444a70.144 70.144 0 0 1-69.973333-69.916445V400.896a70.144 70.144 0 0 1 69.973333-69.944889H722.204444a70.144 70.144 0 0 1 69.916445 69.973333v372.622223a70.144 70.144 0 0 1-69.916445 69.944889" fill="#FDDE80"></path><path d="M710.314667 341.703111c22.613333-7.338667 38.200889-29.098667 36.067555-52.792889a143.616 143.616 0 0 0-6.542222-32.142222c-39.480889-121.628444-229.12-169.045333-423.566222-105.898667C121.799111 214.016-3.783111 363.804444 35.697778 485.461333c3.413333 10.524444 7.992889 20.451556 13.596444 29.809778 12.231111 20.423111 37.603556 28.871111 60.216889 21.532445l600.803556-195.100445z" fill="#9796ED"></path><path d="M281.031111 123.676444l11.235556 34.616889c4.977778 15.331556 21.617778 23.779556 36.920889 18.801778 15.331556-4.977778 23.808-21.589333 18.830222-36.920889l-11.235556-34.588444a29.383111 29.383111 0 0 0-36.920889-18.801778c-15.36 4.949333-23.808 21.589333-18.830222 36.892444" fill="#7B78EB"></path><path d="M444.16 714.069333a139.747556 139.747556 0 0 0 138.296889-119.552 17.493333 17.493333 0 0 0-17.123556-20.195555h-242.346666a17.493333 17.493333 0 0 0-17.123556 20.195555 139.776 139.776 0 0 0 138.296889 119.552" fill="#FFAF66"></path><path d="M704.796444 680.903111L618.951111 640.284444s12.288 55.751111 71.395556 92.672c-0.085333 0.739556-0.284444 1.422222-0.369778 2.190223-12.714667 94.549333 38.200889 179.399111 113.692444 189.553777 75.491556 10.126222 146.972444-58.311111 159.687111-152.860444 12.686222-94.520889-38.200889-179.399111-113.720888-189.525333-60.017778-8.078222-117.418667 33.649778-144.839112 98.588444z" fill="#9796ED"></path><path d="M856.064 682.012444l-19.797333 99.157334a6.570667 6.570667 0 0 1-6.456889 5.290666h-17.777778a6.599111 6.599111 0 0 1-6.542222-7.537777l14.478222-99.128889a6.542222 6.542222 0 0 1 6.485333-5.660445h23.153778c4.181333 0 7.281778 3.811556 6.456889 7.879111m-22.897778 136.078223l-2.986666 16.298666a6.570667 6.570667 0 0 1-6.456889 5.404445h-20.963556a6.599111 6.599111 0 0 1-6.485333-7.651556l2.645333-16.270222a6.599111 6.599111 0 0 1 6.485333-5.546667h21.276445c4.124444 0 7.253333 3.726222 6.485333 7.765334" fill="#C5C2FF"></path></svg>
                    <a href="https://manga.bilibili.com/" target="_blank" class="name">漫画</a>
                    <div class="left-slot">
                        <div class="tab-switch">
                            <div class="tab-switch-item on">人气推荐</div>
                            <div class="tab-switch-item">免费漫画推荐</div>
                        </div>
                        <a href="https://manga.bilibili.com/app-download?from=manga_homepage" target="_blank"
                            class="app-download-link">
                            下载APP
                            <span>领卷免费看</span>
                        </a>
                    </div>
                </div>
                <div class="exchange-btn">
                    <div class="btn">
                        <i class="iconfont icon-shuaxin"></i>
                        换一换
                    </div>
                    <a href="https://manga.bilibili.com/" target="_blank" class="btn more">
                        更多
                        <i class="iconfont icon-jiantou"></i>
                    </a>
                </div>
            </header>
            <div class="manga-list-box">
                <ul>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/1.webp" alt="" />
                            <p title="步天歌" class="manga-title">步天歌</p>
                            <p class="manga-tag">古风　玄幻</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/2.webp" alt="" />
                            <p title="罗小黑战记·蓝溪镇" class="manga-title">罗小黑战记·蓝溪镇</p>
                            <p class="manga-tag">搞笑 治愈</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/3.webp" alt="" />
                            <p title="那年那兔那些事儿" class="manga-title">那年那兔那些事儿</p>
                            <p class="manga-tag">热血</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/4.webp" alt="" />
                            <p title="有兽焉" class="manga-title">有兽焉</p>
                            <p class="manga-tag">搞笑 日常</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/5.webp" alt="" />
                            <p title="大理寺日志" class="manga-title">大理寺日志</p>
                            <p class="manga-tag">古风 冒险</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/6.webp" alt="" />
                            <p title="百妖谱" class="manga-title">百妖谱</p>
                            <p class="manga-tag">古风 治愈</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/7.webp" alt="" />
                            <p title="少年歌行：风花雪月篇" class="manga-title">少年歌行：风花雪月篇</p>
                            <p class="manga-tag">热血 冒险</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/8.webp" alt="" />
                            <p title="镖人" class="manga-title">镖人</p>
                            <p class="manga-tag">热血 古风</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/9.webp" alt="" />
                            <p title="无脑魔女" class="manga-title">无脑魔女</p>
                            <p class="manga-tag">搞笑 日常</p>
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://manga.bilibili.com/detail/mc25501?from=bili_main_pop&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.4">
                            <img src="/img/10.webp" alt="" />
                            <p title="快把我哥带走" class="manga-title">快把我哥带走</p>
                            <p class="manga-tag">搞笑 日常</p>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 剧排名 -->
        <div class="manga-rank">
            <header class="rank-header">
                <span class="name">排名榜</span>
                <div class="tab-switch">
                    <div class="tab-switch-item on">月票</div>
                    <div class="tab-switch-item">应援</div>
                    <div class="tab-switch-item">飙升</div>
                </div>
                <a href="https://manga.bilibili.com/?from=bili_main_rank_more" target="_blank" class="more">
                    更多
                    <i class="iconfont icon-jiantou"></i>
                </a>
            </header>
            <div class="manga-rank-list">
                <div class="manga-rank-item">
                    <span class="rank-number on">1</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc26768?from=bili_main_rank" target="_blank"
                            class="preview-link">
                            <img src="/img/rank-1.webp" alt="">
                            <div class="preview-desc">
                                <p class="title">幽冥诡匠</p>
                                <p class="style">惊奇 悬疑</p>
                                <p class="update">更新至375话</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number on">2</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc26505?from=bili_main_rank&spm_id_from=333.851.b_62696c695f7265706f72745f6d616e6761.18"
                            target="_blank" class="other-link">
                            <p title="咒术回战" class="title">咒术回战</p>
                            <p title="更新至150话" class="update">更新至150话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number on">3</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc28932?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="妹子太多，只好飞升了"class="title">妹子太多，只好飞升了</p>
                            <p title="更新至31话" class="update">更新至31话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">4</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc29195?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="两不疑"class="title">两不疑</p>
                            <p title="更新至番外3" class="update">更新至番外3</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">5</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc28030?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="破云"class="title">破云</p>
                            <p title="更新至37话" class="update">更新至37话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">6</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc27189?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="入间同学入魔了！"class="title">入间同学入魔了！</p>
                            <p title="更新至206话" class="update">更新至206话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">7</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc26009?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="辉夜大小姐想让我告白 ~天才们的恋爱头脑战~"class="title">辉夜大小姐想让我告白 ~天才…</p>
                            <p title="更新至228话" class="update">更新至228话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">8</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc25501?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="步天歌"class="title">步天歌</p>
                            <p title="更新至59话" class="update">更新至59话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">9</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc28932?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="时空之隙·我身边都是些什么神仙"class="title">时空之隙·我身边都是些什么…</p>
                            <p title="更新至48话" class="update">更新至48话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">10</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc28932?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="租借女友"class="title">租借女友</p>
                            <p title="更新至190话" class="update">更新至190话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">11</span>
                    <div class="preview">
                        <a href="manga.bilibili.com/detail/mc26470?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="一拳超人"class="title">一拳超人</p>
                            <p title="更新至190话" class="update">更新至190话</p>
                        </a>
                    </div>
                </div>
                <div class="manga-rank-item">
                    <span class="rank-number">12</span>
                    <div class="preview">
                        <a href="https://manga.bilibili.com/detail/mc28138?from=bili_main_rank" target="_blank"
                            class="other-link">
                            <p title="我的夫君后宫有点多"class="title">我的夫君后宫有点多</p>
                            <p title="更新至134话" class="update">更新至134话</p>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>